/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="accumulative">
			
			<view class="accumulative_box">
				<view class="accumulative_content">分销佣金</view>
				<view class="accumulative_number">{{filter(userInfo.distribut_money)}}</view>
				
			</view>
			<navigator class="accumulative_content w-details" url="/pages/user/withdrawals_list/withdrawals_list?type=1" role="navigation">提现明细</navigator>
			
		</view>
		<view class="commission">
			<view class="withdrawable wrap">
				<view class="commission_list">
					<!-- <image class="commission_icon" :src="imgUrl+'distribut/charge_icon@2x.png'" role="img"></image> -->
					<view class="commission_list_title">可提现佣金</view>
					<view class="commission_list_data red">{{survey.able_withdraw_money}}元</view>
				</view>
			</view>
			<view class="using_commission wrap">
				<view class="commission_list">
					
					<view class="commission_list_title">已申请佣金</view>
					<view class="commission_list_data">{{filter(survey.apply_withdraw_money)}}元</view>
				</view>
				<view class="commission_list">
					
					<view class="commission_list_title">待打款佣金</view>
					<view class="commission_list_data">{{filter(survey.withdrawing_money)}}元</view>
				</view>
			
				
			</view>
			<view class="other_commission wrap">
				<view class="commission_list">
				
					<view class="changeTab" @tap="changeUse_know">
						<view class="commission_list_title">用户须知</view>
						<image :src="imgUrl+'common/xr_3.png'"  mode="" class="index_r"></image>
					</view>
				</view>
				<view class="use_know" v-if="user_Know">
					<view class="apply_description">
						1.买家确认收货（
						<text>1天</text>
						）后，佣金才可提现。结算期内，买家如退 货，佣金将自动扣除；
					</view>
					<view class="apply_description">
						2.可用佣金满
						<text>
							3
						</text>
						元 才可申请提现。
					</view>
				</view>
			</view>
		</view>
		<view class="apply_cash wrap">
			
			<navigator class="apply_btn" url="/pages/distribut/withdrawals/withdrawals" role="navigation">提现</navigator>
		</view>
		
	</view>
</template>

<script>
	const globalData=getApp().globalData//从app.vue获取用户信息
	import {getSurvey,getUserInfo} from "@/api/api.js";
	import config from "@/api/config.js";
	export default {
		data() {
			return {
				user_Know:false,
				hostUrl:config.host,//路径前缀
				imgUrl:config.imgUrl,
				survey:"",//分销概况
				userInfo:"",//用户信息
			};
		},
		onShow(){
			this.getSurvey()
			this.userInfo=globalData.userInfo;
			if(this.userInfo==""){
				this.getUserInfo()
			}
		},
		methods:{
			/*用户信息*/
			getUserInfo(){
				getUserInfo().then(res=>{
					if(res){
						// console.log(res)
						if(res.head_pic.indexOf("public")==1){ //判断头像 是否有 域名
							let hostUrl=config.host;//路径前缀
							res.head_pic=hostUrl+res.head_pic;//路径前缀
						}
						this.userInfo=res;
						getApp().globalData.userInfo=res;
					}
				})
			},
			/*分销提现概况*/ 
			getSurvey(){
				getSurvey().then(res=>{
					console.log(res)
					this.survey=res;
				})
			},
			changeUse_know(){
				this.user_Know=!this.user_Know;
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5
	}

	.clearfix:after {
		content: '.';
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		clear: both;
	}

	.wrap {
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.wrap:first-child {
		margin-top: 20rpx;
	}

	.accumulative {
		
		height: 180rpx;
		  overflow: hidden;
		  position: relative;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 30rpx;
		  background: #ff3b3b;
	}
	.accumulative_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.accumulative .accumulative_number,.accumulative .accumulative_content,.accumulative navigator{
		/*h5 z-index为-1 图片不显示*/
		position: relative;
		z-index: 2;
	}
	.accumulative .accumulative_number {
		margin-top: 24rpx;
		text-align: center;
		color: #fff;
		font-size: 38rpx;
		font-weight: bold;
	}

	.accumulative .accumulative_content {
		font-size: 32rpx;
		text-align: center;
		margin-top: 5rpx;
		color: #fff;
	}

	.accumulative .accumulative_bg {
		width: 100%;
		height: 331rpx;
		position: absolute;
		bottom: 0;
		z-index: 0;
	}

	.commission .wrap {
		background-color: #fff;
	}

	.commission .wrap .commission_list {
		height: 106rpx;
		border-bottom: 1px solid #f3f3f3;
		position: relative;
	}

	.commission .wrap .commission_list:last-child {
		border-bottom: 0;
	}

	.commission .wrap .commission_list .commission_list_title {
		font-size: 28rpx;
		color: #333333;
		float: left;
		padding-left: 56rpx;
		height: 106rpx;
		line-height: 106rpx;
		position: relative;
	}

	.commission .wrap .commission_list .commission_list_data {
		color: #1f1f1f;
		font-size: 28rpx;
		float: right;
		height: 106rpx;
		line-height: 106rpx;
	}

	.commission .wrap .commission_list .red {
		color: #ff3b3b;
	}

	.commission .wrap .commission_list .commission_icon {
		position: absolute;
		left: 4rpx;
		top: 33rpx;
		height: 40rpx;
		width: 40rpx;
	}

	
	.use_know{
		padding: 20rpx 0;
		color: #333;
		font-size: 28rpx;
	}
	.use_know text{
		color: #ff3b3b;
	}

	.apply_btn {
		margin-top: 70rpx;
		height: 80rpx;
		width: 100%;
		border-radius: 40rpx;
		background-color: #ff3b3b;
		color: #fff;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.w-details {
		 float:right;
		    width: 180rpx;
		height: 60rpx;
		border: 2rpx solid #fff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		  font-size: 30rpx !important;
	}
	.changeTab{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.index_r{
		width: 32rpx;
		height: 32rpx;
	}
</style>
